@include('admin::layouts.header')
<div class="admin-main layui-anim layui-anim-upbit">
	<fieldset class="layui-elem-field layui-field-title">
		<legend>添加</legend>
	</fieldset>
	<form class="layui-form layui-form-pane" lay-filter="form">
		<div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-4">
                <select lay-verify="required" name="product_type_id" lay-search="" lay-filter="one_list">
                    <option value="">请选择</option>
					@foreach($product_type_info as $v)
					<option value="{{$v->id}}">{{$v->lefthtml}}{{$v->title}}</option>
					@endforeach
                </select>
            </div>
        </div>
		<div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-4">
                <input type="text" maxlength="50" name="name" lay-verify="required" placeholder="请输入商品名称" class="layui-input">
            </div>
        </div>
		@include('admin::layouts.create_html_image',['name'=>'图片','adPic'=>'adPic','image_id'=>'image_id','adBtn'=>'adBtn'])
		
		
		@include('admin::layouts.create_html_image_all',['name'=>'轮播图','upload_img'=>'upload_img','upload_img_list'=>'upload_img_list'])
		
		<div class="layui-form-item">
            <label class="layui-form-label">是否有属性</label>
            <div class="layui-input-4">
                <input type="checkbox" checked id="specs_status" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
            </div>
        </div>
		<div id="no" style="display:none;">
			<div class="layui-form-item">
				<label class="layui-form-label">产品售价</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="money" placeholder="请输入产品售价" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">产品市场价</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="bazaar_money" placeholder="请输入产品市场价" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">产品成本价</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="cost_money" placeholder="请输入产品成本价" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮费</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="postage" value="0" placeholder="请输入邮费" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">库存</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="stock" value="0" placeholder="请输入库存" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">销量</label>
				<div class="layui-input-4">
					<input type="text" maxlength="10" id="sales" value="0" placeholder="请输入销量" class="layui-input">
				</div>
			</div>
		</div>
		<div id="yes">  
			<div class="layui-form-item">
				<label class="layui-form-label" style="border-width:0px;"></label>
				<div class="layui-input-4">
					<button type="button" class="layui-btn layui-btn-normal" onclick="add_multi_sku()" >添加属性</button>
				</div>
			</div>
			{{-- 属性选择 --}}
			<div id="sku_list_html"></div>
			{{-- 属性选择完成列表 --}}
			<div id="sku_list_info"></div>
		</div>
		@include('admin::layouts.create_ue',['name'=>'商品详情','id'=>'content'])
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-2">
                <input type="text" onkeyup="this.value=this.value.replace(/\D/gi,&quot;&quot;)" maxlength="11" name="sort" value="1" placeholder="请输入排序编号" lay-verify="required" class="layui-input">
            </div>
        </div>
		@include('admin::layouts.submit',['url'=>route('shop_admin.product.index')])
	</form>
</div>
<div id="sku_content" style="display:none;">
	<div style="margin:30px;" id="ku_content_sku_list"></div>	
	<div style="margin:30px 30px 30px 0;">
		<div class="layui-input-4">
			<input type="text" maxlength="30" id="sku_input" placeholder="请输入属性名称" class="layui-input">
		</div>
		<button type="button" class="layui-btn layui-btn-danger" onclick="sku_addbtn()">新建属性</button>
	</div>
</div>
@include('admin::layouts.footer')
@include('admin::layouts.create_ajax_image',['url'=>route('admin.upload.upload_file'),'adPic'=>'#adPic','image_id'=>'#image_id','adBtn'=>'#adBtn'])

@include('admin::layouts.create_ajax_image_all',['url'=>route('admin.upload.upload_file'),'upload_img'=>'#upload_img','upload_img_list'=>'#upload_img_list','images'=>'images'])

<script>
	var product_type_id = 0;//商品分类id
	var item = []; //选择数据
    layui.use(['form','layer'], function () {
        var form = layui.form,layer = layui.layer,$= layui.jquery;
		form.verify({	
			image_id: function(value){  
				if(value == ''){  
					return '请上传图片！';  
				}  
			}	
		});
		//提交监听
        form.on('submit(submit)', function (data) {
			var specs_status = $('#specs_status').is(":checked") ? 1 : 0;
			var specs_data = [];
			if(specs_status){
				if(!$.trim($('#sku_list_info').html())){
					layer.msg('请完善商品属性！',{icon: 2, time: 1000});return;
				}
				$('.from_item_id').each(function(){
					var content = [],money,bazaar_money,cost_money,postage,stock,sales;
					$(this).children().each(function(){
						if($(this).index() <item.length){
							content.push({
								id:$(this).children('div').attr('data-id'),
								value:$(this).children('div').text(),
							})
						}else{
							if($(this).index() == item.length){
								money = $(this).children('div').children('input').val();
							}
							if($(this).index() == item.length + 1){
								bazaar_money = $(this).children('div').children('input').val();
							}
							if($(this).index() == item.length + 2){
								cost_money = $(this).children('div').children('input').val();
							}
							if($(this).index() == item.length + 3){
								postage = $(this).children('div').children('input').val();
							}
							if($(this).index() == item.length + 4){
								stock = $(this).children('div').children('input').val();
							}
							if($(this).index() == item.length + 5){
								sales = $(this).children('div').children('input').val();
							}
						}
					})
					var sku = [];
					for(var i = 0;i< content.length;i++){
						sku.push(content[i].id);
					}
					sku = sku.join(',');
					specs_data.push({
						specs:content,
						money:money,
						bazaar_money:bazaar_money,
						cost_money:cost_money,
						postage:postage,
						stock:stock,
						sales:sales,
						sku:sku
					})
				})
			}else{ 
				specs_data.push({
						money:$('#money').val(),
						bazaar_money:$('#bazaar_money').val(),
						cost_money:$('#cost_money').val(),
						postage:$('#postage').val(),
						stock:$('#stock').val(),
						sales:$('#sales').val(),
				})
			}
			data.field.specs_status = specs_status;
			data.field.specs_data = specs_data;
			data.field.attrbute_list = item;
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $.post("{{route('shop_admin.product.store')}}",data.field,function(res){ 
				layer.close(loading);
                if(res.status == 1){
                    layer.msg(res.msg,{icon: 1, time: 1000},function(){
                        location.href = res.url;
                    });
                }else{
                    layer.msg(res.error,{icon: 2, time: 1000});
                }
            });
        })
		//监听指定开关
		form.on('switch(switchTest)', function(data){
			if(this.checked){
				$('#yes').show();
				$('#no').hide();
			}else{
				$('#no').show();
				$('#yes').hide();
			}
		});
		//属性选择弹出层
		add_multi_sku = function(){
			if(!product_type_id){
				layer.msg('请选择商品分类！',{icon: 2, time: 2000});return;
			}
			layer.open({
				type: 1,
				resize: false,
				maxmin: true, 
				title: "选择商品属性",
				area: ["800px", "456px"],
				btn: ["取消", "确定"],
				content: $("#sku_content"), //此处后放置到弹出层内部的内容
				yes: function(index, layero) { //取消按钮对应回调函数
					layer.close(index)
				},
				btn2: function(index) { //确认按钮对应事件
					var ids = [];
					$("#ku_content_sku_list>a").each(function(){
						if($(this).attr("data-status") == 1){
							ids.push($(this).attr("data-id"));
						}
					})
					if(ids.length>0){
						ids = ids.join(',');
						var loading = layer.load(1, {shade: [0.1, '#fff']});
						$.get("/shop_admin/product/"+ids+"/attrbute_value", function (data) {
							layer.close(loading);
							var html = '';
							$.each(data, function (k,key) {
								html += '<div class="layui-form-item">';
								html += '<label class="layui-form-label" id="key_item_'+key.id+'">'+key.name+'</label>';
								html += '<div class="layui-input-10" id="key_list_'+key.id+'">';
								$.each(data[k].attrbute_value_to, function (v,value) {
									html += '<a class="layui-btn layui-btn-primary" data-id="'+value.id+'" data-status="0" data-key-id="'+value.attrbute_key_id+'" onclick="sku_value_item(this)">'+value.value+'</a>';
								});
								html += '</div>';
								html += '</div>';
								html += '<div class="layui-form-item">';
								html += '<label class="layui-form-label"></label>';
								html += '<div class="layui-input-4">';
								html += '<input type="text" maxlength="30" id="attrbute_key_'+key.id+'" placeholder="请输入属性值" class="layui-input">';
								html += '</div>';
								html += '<button type="button" class="layui-btn layui-btn-danger" onclick="sku_add_value('+key.id+')">新建属性值</button>';
								html += '</div>';
							});
							$('#sku_list_html').html(html);
							form.render();
						});
						$('#sku_list_info').html('');
						item = [];
					}
				}
			})
		}
		//新建属性值
		sku_add_value = function(id){
			var haveit = false;
			var value = $.trim($('#attrbute_key_'+id).val());
			if(value.length<=0){layer.msg("请输入内容",{icon: 2, time: 2000});return};
			$("#key_list_"+id+">a").each(function() {
				if($(this).text() == value) {
					layer.msg('新建的已存在,请勿重复创建！',{icon: 2, time: 2000});
					haveit = true;
					$('#attrbute_key_'+id).val('');
				}
			})
			if(haveit) return;
			loading =layer.load(1, {shade: [0.1,'#fff']});
			$.post("{{route('shop_admin.product.attrbute_value_store')}}",{attrbute_key_id:id,value:value},function(res){ 
				layer.close(loading);
                if(res.status == 1){
					var skuitem = '<a class="layui-btn layui-btn-primary" data-id="'+res.msg+'" data-status="0" data-key-id="'+id+'" onclick="sku_value_item(this)">'+value+'</a>';
					$("#key_list_"+id).append(skuitem); 
                }else{
                    layer.msg(res.error,{icon: 2, time: 2000});
                }
				$('#attrbute_key_'+id).val("");
            });
		}
		//弹窗中的新建sku
		sku_addbtn = function() {
			var haveit = false;
			var value = $.trim($("#sku_input").val());
			if(value.length<=0){layer.msg("请输入内容",{icon: 2, time: 2000});return};
			$("#ku_content_sku_list>a").each(function() {
				if($(this).text() == value ) {
					layer.msg('新建的已存在,请勿重复创建！',{icon: 2, time: 2000});
					haveit = true;
					$("#sku_input").val("");
				}
			})
			if(haveit) return;
			loading =layer.load(1, {shade: [0.1,'#fff']});
			$.post("{{route('shop_admin.product.attrbute_key_store')}}",{product_type_id:product_type_id,name:value},function(res){ 
				layer.close(loading);
                if(res.status == 1){
					var skuitem = '<a class="layui-btn layui-btn-primary" data-id="'+res.msg+'" data-status="0" onclick="sku_item(this)">'+value+'</a>';
					$("#ku_content_sku_list").append(skuitem); 
                }else{
                    layer.msg(res.error,{icon: 2, time: 2000});
                }
				$("#sku_input").val("");
            });
		};
		//弹框属性选择
		sku_item = function(obj){
			if($(obj).attr('data-status') == 1){
				$(obj).attr('class','layui-btn layui-btn-primary');
				$(obj).attr('data-status','0');
			}else{
				$(obj).attr('class','layui-btn');
				$(obj).attr('data-status','1');
			}	
		}
		//属性值选择
		sku_value_item = function(obj){	
			//属性值id
			var id = $(obj).attr('data-id');
			//属性id
			var attrbute_key_id =  $(obj).attr('data-key-id');
			//属性
			var key = $('#key_item_'+attrbute_key_id).text();
			//属性值
			var value = $(obj).text();
			//属性下标
			var index = $('#key_item_'+attrbute_key_id).parent().index()/2;
			//判断是否选中
			if($(obj).attr('data-status') == 1){//取消选中
				$(obj).attr('class','layui-btn layui-btn-primary');
				$(obj).attr('data-status','0');
				if(item[index].sub.length==1){
					item.splice(index);
				}else{
					for(var i = 0;i<item[index].sub.length;i++){
						if(item[index].sub[i].id == id){
							item[index].sub.splice(i,1);
						}
					}
				}
			}else{//选中
				$(obj).attr('class','layui-btn');
				$(obj).attr('data-status','1');
				if(item[index]){
					item[index].sub.push({
						id:id,
						name:value
					});
				}else{
					item[index] = {
						id:attrbute_key_id,
						name:key,
						sub:[{
							id:id,
							name:value
						}]
					}
				}
			}
			var html = '';	   
			html += '<table cellspacing="0" cellpadding="0" border="0" class="layui-table">';
			html += '<tbody>';
			html += '<tr data-index="0" class="">';
			for(var i = 0;i<item.length;i++){
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-0">'+item[i].name+'</div>';
				html += '</td>';
			}
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">产品售价</div>';
			html += '</td>';
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">产品市场价</div>';
			html += '</td>';
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">产品成本价</div>';
			html += '</td>';
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">邮费</div>';
			html += '</td>';
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">库存</div>';
			html += '</td>';
			html += '<td align="center">';
			html += '<div class="layui-table-cell laytable-cell-1-0-0">销量</div>';
			html += '</td>';
			html += '</tr>';
			var length = $('#sku_list_html>div').length / 2;
			
			if(length == item.length){
				html += data_info_fuc();
				html += '</tbody>';
				html += '</table>';
			}else{
				html = '';
			}
			$('#sku_list_info').html(html);
		}
		data_info_fuc = function(){
			var length = item.length;
			var data_info = [];
			if(length < 2 ){
				for(var i = 0;i<item[0].sub.length;i++){
					var arr = [];
					arr.push({
								id:item[0].sub[i].id,
								name:item[0].sub[i].name
					})
					data_info.push(arr);
				}
			}else{
				var arr = [];
				for(var i = 0;i<item.length;i++){
					arr.push(item[i].sub);
				}
				data_info = [].reduce.call(arr,function(col, set) {
					var res = [];
					col.forEach(function(c) {
						set.forEach(function(s){	
							var t = [].concat( Array.isArray(c) ? c : [c] );
							t.push(s);
							res.push(t);
						})
					});
					return res;
				});
			}	
			var html = '';
			for(var i = 0;i < data_info.length;i++){
				html += '<tr data-index="0" class="from_item_id">';
				for(var j = 0;j<data_info[i].length;j++){
					html += '<td align="center">';
					html += '<div class="layui-table-cell laytable-cell-1-0-0" data-id="'+data_info[i][j].id+'">'+data_info[i][j].name+'</div>';
					html += '</td>';
				}
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" size="10"/>'; 
				html += '</div>';
				html += '</td>';
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" size="10"/>'; 
				html += '</div>';
				html += '</td>';
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" size="10"/>'; 
				html += '</div>';
				html += '</td>';
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" value="0" size="10"/>'; 
				html += '</div>';
				html += '</td>';
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" value="0" size="10"/>'; 
				html += '</div>';
				html += '</td>';
				html += '<td align="center">';
				html += '<div class="layui-table-cell laytable-cell-1-0-6">'; 		
				html += '<input class="list_order layui-input" value="0" size="10"/>'; 
				html += '</div>';
				html += '</td>';					
				html += '</tr>';
			}
			return html;
		}
		//选择商品分类
        form.on('select(one_list)', function(data){
			var id = data.value;
			if(product_type_id != id){
				product_type_id = id;
				var loading = layer.load(1, {shade: [0.1, '#fff']});
				$.get("/shop_admin/product/"+id+"/attrbute_key", function (data) {
					layer.close(loading);
					var html = '';
					$.each(data, function (i,value) {
						html += '<a class="layui-btn layui-btn-primary" data-id="'+value.id+'" data-status="0" onclick="sku_item(this)">'+value.name+'</a>';
					});
					$('#ku_content_sku_list').html(html);
					form.render();
				});
			}
        });
    });
</script>